<template>
  <div id="consult_right">
    <div class="recommend">
      <h3 class="title">精彩推荐</h3>
      <div class="content clearflx">
        <div class="content_imgs">
          <img src="../../assets/consult/b1.jpg" alt style="width:100%;display:block;" />
        </div>
        <p class="text">4月大连面料展，精纺、粗纺哈哈哈</p>
        <p class="text contents_text">近年来，随着东北地区纺织服装 相关产业的发展，西柳【中国裤 业棉服名镇】、普兰店【中国哈哈哈</p>
      </div>
      <div class="content clearflx">
        <div class="content_imgs">
          <img src="../../assets/consult/b1.jpg" alt style="width:100%;display:block;" />
        </div>
        <p class="text">4月大连面料展，精纺、粗纺哈哈哈</p>
        <p class="text contents_text">近年来，随着东北地区纺织服装 相关产业的发展，西柳【中国裤 业棉服名镇】、普兰店【中国哈哈哈</p>
      </div>
      <div class="content clearflx">
        <div class="content_imgs">
          <img src="../../assets/consult/b1.jpg" alt style="width:100%;display:block;" />
        </div>
        <p class="text">4月大连面料展，精纺、粗纺哈哈哈</p>
        <p class="text contents_text">近年来，随着东北地区纺织服装 相关产业的发展，西柳【中国裤 业棉服名镇】、普兰店【中国哈哈哈</p>
      </div>
      <div class="content clearflx">
        <div class="content_imgs">
          <img src="../../assets/consult/b1.jpg" alt style="width:100%;display:block;" />
        </div>
        <p class="text">4月大连面料展，精纺、粗纺哈哈哈</p>
        <p class="text contents_text">近年来，随着东北地区纺织服装 相关产业的发展，西柳【中国裤 业棉服名镇】、普兰店【中国哈哈哈</p>
      </div>
    </div>
    <div class="cheater">
      <div class="left_content">
        <h3 class="title">展会防骗</h3>
        <p class="content">展销会买劣质货质监局：可向展销会举办者索赔</p>
        <p class="content">珠宝展没人商家斥骗展 交通展卖锁具疑遭品拼展</p>
        <p class="content">展销会买劣质货质监局：可向展销会举办者索赔</p>
        <p class="content">展销会买劣质货质监局：可向展销会举办者索赔</p>
        <p class="content">展销会买劣质货质监局：可向展销会举办者索赔</p>
        <p class="content">展销会买劣质货质监局：可向展销会举办者索赔</p>
        <p class="content">展销会买劣质货质监局：可向展销会举办者索赔</p>
      </div>
    </div>
    <div class="imgbanner">
      <swiper :options="swiperImg" ref="mySwiper" style="height:100%;">
        <swiper-slide>
          <img src="../../assets/consult/banner1.jpg" alt style="width:100%;display:block;" />
        </swiper-slide>
        <swiper-slide>
          <img src="../../assets/consult/banner2.jpg" alt style="width:100%;display:block;" />
        </swiper-slide>
        <swiper-slide>
          <img src="../../assets/consult/banner3.jpg" alt style="width:100%;display:block;" />
        </swiper-slide>
      </swiper>
    </div>
    <div class="Txtbanner">
      <swiper :options="Txtbanner" ref="mySwiper" style="height:100%;">
        <swiper-slide>
          <p class="Txtbanner_text">2018中国激光与装备制造发展论坛10月展论坛10月</p>
        </swiper-slide>
        <swiper-slide>
          <p class="Txtbanner_text">2018中国激光与装备制造发展论坛10月展论坛10月</p>
        </swiper-slide>
        <swiper-slide>
          <p class="Txtbanner_text">2018中国激光与装备制造发展论坛10月展论坛10月</p>
        </swiper-slide>
        <swiper-slide>
          <p class="Txtbanner_text">2018中国激光与装备制造发展论坛10月展论坛10月</p>
        </swiper-slide>
        <swiper-slide>
          <p class="Txtbanner_text">2018中国激光与装备制造发展论坛10月展论坛10月</p>
        </swiper-slide>
        <swiper-slide>
          <p class="Txtbanner_text">2018中国激光与装备制造发展论坛10月展论坛10月</p>
        </swiper-slide>
        <swiper-slide>
          <p class="Txtbanner_text">2018中国激光与装备制造发展论坛10月展论坛10月</p>
        </swiper-slide>
        <swiper-slide>
          <p class="Txtbanner_text">2018中国激光与装备制造发展论坛10月展论坛10月</p>
        </swiper-slide>
        <swiper-slide>
          <p class="Txtbanner_text">2018中国激光与装备制造发展论坛10月展论坛10月</p>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      swiperImg: {
        autoplay: true,
        loop: true,
        direction: "vertical",
        loopFillGroupWithBlank: true,
      },
      Txtbanner: {
        autoplay: true,
        loop: true,
        direction: "vertical",
        loopFillGroupWithBlank: true,
        slidesPerView: 7,
      },
    }
  },
  
};
</script>
<style lang="scss" scoped>
#consult_right {
  text-align: left;
  .recommend {
    .title {
      color: #c81622;
      border-bottom: 1px solid #848484;
      border-left: 3px solid #c81622;
      padding-left: 20px;
      line-height: 30px;
      // margin-top: 18px;
      // margin-bottom: 10px;
      font-weight: 400;
    }
    .content {
      padding: 8px 0;
      position: relative;
      .content_imgs {
        width: 100px;
        float: left;
      }
      .text {
        float: left;
        width: 206px;
        font-size: 15px;
        color: #c81622;
        height: 23px;
        line-height: 23px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        cursor: pointer;
        padding-left: 10px;
      }
      .contents_text {
        width: 182px;
        height: 58px;
        line-height: 20px;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        cursor: pointer;
        color: #848484;
      }
    }
    .content_imgs::after {
      position: absolute;
      content: "";
      display: block;
      width: 320px;
      height: 1px;
      bottom: 0;
      left: 0;
      background-color: #e9e8e9;
    }
  }

  .cheater {
    margin-bottom:46px;
    .left_content {
      text-align: left;
      .title {
        color: #c81622;
        border-bottom: 1px solid #848484;
        border-left: 3px solid #c81622;
        padding-left: 20px;
        line-height: 30px;
        margin-top: 16px;
        margin-bottom: 4px;
        font-weight: 400;
      }
      .content {
        height: 26px;
        line-height: 26px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        cursor: pointer;
        color: #000;
        padding-left: 6px;
      }
      .content:hover {
        text-decoration-line: underline;
        color: #c81622;
      }
    }
  }
  .imgbanner{
    height: 220px;
    margin-bottom: 18px;
  }
  .Txtbanner{
    height: 190px;
    .Txtbanner_text{
      padding-left: 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      cursor: pointer;
      color: #000;
    }
    .Txtbanner_text:hover{
      text-decoration-line: underline;
      color: #c81622;
    }
  }
}
</style>